<template>
  <div class="guessLike">
    <el-divider border-style="dashed" ><el-icon><IceCreamRound /></el-icon>猜你喜欢</el-divider>
    <el-skeleton :loading="loading" v-for="(i,index) in 4" :key="index" style="margin-top: 50px;width:230px;border:1px solid gainsboro; height:331px;border-radius: 10px"  animated>
      <template #template>
        <el-skeleton-item variant="image" style="width: 232px; height: 238px" />
        <div style="text-align: center;display: flex;flex-direction: column;align-items: center" >
          <el-skeleton-item variant="p" style="width: 30%;margin: 10px" />
          <el-skeleton-item variant="p" style="width: 80%;margin-top: 10px" />
        </div>
      </template>
    </el-skeleton>
    <div class="guessLike-box" v-for="(i,index) in 4" v-if="!loading">
      <div class="img-box">
        <img src="http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg" alt="图片走丢了">
      </div>
      <p>春日暖阳</p>
      <p style="margin-bottom: 10px">那么温暖 让我靠近一些</p>
    </div>
  </div>
</template>

<script>
import {ref,onMounted} from "vue";

export default {
  name: "GuessLike",
  setup(){
    let loading = ref(true)

    onMounted(() => {
      timer()
    })

    function timer(){
      setTimeout(()=>{
        loading.value = false
      },2000)
    }

    return {
      loading
    }
  }
}
</script>

<style scoped lang="scss">
.guessLike {
  h2 {
    text-align: center;
  }
  .guessLike-box {
    border-radius: 10px;
    background: #def3e6;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    text-align: center;
    .img-box {
      height: 228px;
      overflow: hidden;
      cursor: pointer;
    }
    &>p{
      margin: 10px 0;
    }
    img{
      width: 230px;
    }
  }
}
</style>
